{include file="index@public/header" /}
<!-- 搜索结果页的css -->
<style type="text/css">
	h1,
	h2,
	h3,
	h4 {
		font-weight: 700 !important;
	}



	.layui-card {
		padding: 10px 20px 50px;
	}


	img {
		max-width: 100%;
	}

	.content-box {
		padding: 0px 20px 50px;
		
		justify-content: flex-start;
	
	}

	.content-box>ul {
		width: 85%;
	}

	.content-box>ul>li {
		width: 100%;
	}

	.content-box .tablesaw-stack {
		max-width: 1350px;
		overflow: auto;
	}

	.content-li-title {
		padding: 10px 0px;
		color: #36648a;
		font-size: 1.5em;
		font-weight: 700;
	}

	.content-li-title a {
		display: inline-block;
		margin-right: 1rem;
	}

	.content-li-img {
		width: 5rem;
		margin-right: 5px;
	}

	.content-li-img img {
		width: 5rem;
	}

	.content-li-box {
		display: flex;
		width: 100%;
	}

	.body-buttom-title {
		background-color: #F2F2F2;
		font-size: 12px;
		border-left: 1px solid #F2F2F2;
		border-right: 1px solid #F2F2F2;
		border-bottom: 1px solid black;
		padding: 5px 0px;
		color: #666;
		display: flex;
	}

	.body-buttom-title div {
		padding: 0.5rem 1rem;
	}


	.layui-card-header {
		border-bottom: 1px solid #999;
	}

	.search-recommend {
		display: table-cell;
       
		border: 1px solid #999;
		border-radius: 0.5rem;
		margin-top: 3rem;
		padding: 0.5rem;
		margin-left: 4rem;
		min-width: 8.12rem;
	}

	.content-table-box {
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow: auto;
		text-decoration: none;
	}

	.content-table-box ul li a {
		display: flex;
		text-decoration: none;
	}



	.content-table-box ul li a:hover div {
		background-color: #36648a;
		color: white;
	}

	.content-table-box li div {

		color: #333333;
	}

	.content-table-box-title li {
		display: flex;
	}

	.content-table-box-title li div {
		border-bottom: 1px solid black;
		background-color: #F2F2F2;
		font-size: 12px;
		color: #666;
		padding: 5px 0px;
	}
	.tijiao {
	    background-color: #FDD702;
	    font-weight: bold;
	    border-radius: 5px;
	    height: 30px;
	    line-height: 30px;
	    padding: 0 10px;
	}
	/* 搜索样式调整 */
	.sear-tips-result-content{
		display: flex;
	}
	/* 搜索结果页适配手机 */
	.pts{
    	color: #36648a;
    }
	@media screen and (max-width: 768px) {
		.content-li-title a{
			font-size: 0.75rem;
			font-weight: 600;
		}
		.content-table-box ul li a div:nth-child(n+2){
			display: none;
		}
		.content-table-box ul li  div:nth-child(n+2){
			display: none;
		}
		.content-box{
			flex-direction: column;
			padding: 0;
		}
		.search-recommend{
			margin:0;
			margin-top: 2rem;
		}
	}
	.related-search{padding-left: 20px}
	.related-search-first{padding: 3px 0px 2px 0px}
	.related-search-div{width:fit-content;float:left;padding:5px;cursor:pointer;margin:0px 5px 3px 0px;height: 28px;border:1px solid #36648a;}
	.related-search-div span{font-size: 12px}
	.span-related{color: #36648a}
	.related-search-div:hover{background-color: #36648a}
	.related-search-div:hover span{color:#ffffff}
	.related-search-div:hover div{color:#ffffff}
</style>

<div class="layui-container"
	style="width: 100%;font: 12px/14px arial,helvetica,sans-serif;">
	<div class="layui-card card-box">
		<div class='firstbreadcrumb' style='display: inline-block;'>
			<span class="layui-breadcrumb" lay-separator="/">
				<a href="/products/" style='font: 12px/14px arial,helvetica,sans-serif;'>Product Categories</a>
				<a style='font: 12px/14px arial,helvetica,sans-serif;'><cite>{$part_number}</cite></a>
			</span>
		</div>

		<div class="layui-card-header">
			<h1 style="display:inline-block;">{$part_number}</h1>
		</div>
         
        <?php if(!empty($new_related)){?>
		<div class='related-search'>
			<div class='related-search-first'>Related search:</div>
			{foreach $new_related as $key=>$vo }
			<div class='related-search-div' onclick="related_click({$key})">
				{foreach $vo as $k=>$v }
				<?php if($k!='num'){?>
				<span>{$k}</span>: <span class="span-related">{$v}</span>
				<?php } ?>			
			    {/foreach}
			    <div style="padding: 3px 0px" class="span-related">{$vo['num']}</div>
			    
			</div>
			{/foreach}
			<div style="clear:both"></div>
		</div>
		<hr>
		<?php }?>
		{foreach $new_related as $key=>$vo }
		{foreach $vo as $k=>$v }	
		<form style="display:none" method="post" action="/sr/{$v}/" name='related_click_{$key}'> 
			<input type="text" name="{:str_replace(' ','_',$k)}" value="{$k}">
			<button type="submit" id='related-search-button-{$key}'>tj</button>
		</form>   
	    {/foreach}		    
	    {/foreach}

		
		<div class="content-box" style="position: relative;">
			
			<?php if(!empty($result)){?>
			<?php if($result!='no index'){?>
			<ul>
			    {foreach $result as $key=>$vo }
				<li>
					<div class="content-li-title">
						{:htmlspecialchars_decode($vo['nav'])}
					</div>
					<div class="content-li-box">
						<div class="content-li-img">
							<img src="{$vo['img']}">
						</div>
						<div class="content-table-box">
							<ul class="content-table-box-title">
								<li>
									<?php
		                                $field=explode(',',$vo['title']);
		                                $width=explode(',',$vo['width']);
		                                foreach($field as $k=>$v ){
									?>
									<div style="width: {$width[$k]};">{:str_replace('_',' ',$v)}</div>
									<?php } ?>
								</li>
							</ul>

							<ul class="content-table-box-cont">
								<?php foreach($vo['body'] as $k=>$v ){?>
								<li>
									<a href="/products/{$v['url']}/" onclick="tongji2('{$k}','2','{$part_number}')">

									<?php
	                                    $d=explode(',',$v['data']);

	                                    foreach($d as $k1=>$v1 ){
									?>
									    <?php if($k1!='0'){ ?>
										<div style="width: {$width[$k1]};">{$v1}</div>
									<?php }else{ ?>
										<div style="width: {$width[$k1]};" class='pts'>{$v1}</div>
									<?php } ?>
									<?php } ?>
									</a>
								</li>
								<?php } ?>
							</ul>
						</div>
					</div>
				</li>
                {/foreach}
			</ul>

			<!-- <?php if(!empty($recommend_result)){?>
			<div class="search-recommend" style="float: right;position: absolute;top:5px;right: 0px">
				<div style="line-height:30px;height:30px;border-bottom:1px solid black;">Recommended Search</div>
				<ol style="padding:10px 5px;" >
					{foreach $recommend_result as $key=>$vo }
					<li style="padding:3px 0px">
						<a href="/sr/{$vo['_source']['words']}/">{$vo['_source']['words']}</a>
					</li>
					{/foreach}
				</ol>
			</div>
			<?php }?> -->
			
             
			<?php if(!empty($page_result)){?>
				<div style="padding: 20px 0px">
					<div style="font: 14px arial,helvetica,sans-serif;">NEWS:</div>
					<div style="padding-left: 10px;">
						{foreach $page_result as $key=>$vo }
						<div style="padding:10px 0px">
							<a href="{$vo['_source']['url']}" style="font-size:14px;">{:stripslashes($vo['_source']['h1'])}</a>
							<div style="color: #333;padding-top:10px">{:stripslashes($vo['_source']['description'])}</div>
						</div>
						{/foreach}
				    </div>
					
				</div>
			<?php }?>

			<?php }else{ ?>
			 <div style="text-align: center;font-size:14px;">
			 	No Document
			 </div>
			<?php } ?>
			<?php }else{ ?>
			<div style='float:right;width:100%;background-color:#f2f2f2'>
								<h2 style="padding:10px">Please enter your details below and we will be touch right
									away!</h2>
								<div class="layui-form">

									<div class="layui-col-sm4" style="padding: 10px 10px">
										<div style="float:left;width:20%;height: 40px;line-height: 40px;color: #333;">
											Name<span style="color:#EB202B;font-size:18px">*</span>:</div>
										<div class="layui-input-block" style="float:right;width:79.5%;">
											<input type="text" name="name" placeholder="Enter your first name"
												autocomplete="off" class="layui-input" />
										</div>
									</div>
									<div class="layui-col-sm4" style="padding: 10px 10px">
										<div style="float:left;width:20%;height: 40px;line-height: 40px;color: #333;">
											Company:</div>
										<div class="layui-input-block" style="float:right;width:80%;height:40px">
											<input type="text" name="company" placeholder="Enter your company name"
												autocomplete="off" class="layui-input" />
										</div>
									</div>
									<div class="layui-col-sm4" style="padding: 10px 10px">
										<div style="float:left;width:20%;height: 40px;line-height: 40px;color: #333;">
											Email<span style="color:#EB202B;font-size:18px">*</span>:</div>
										<div class="layui-input-block" style="float:right;width:79.5%;">
											<input type="text" name="email" placeholder="Enter a valid email address"
												autocomplete="off" class="layui-input" />
										</div>
									</div>
									<div class="layui-col-sm4" style="padding: 10px 10px">
										<div style="float:left;width:20%;height: 40px;line-height: 40px;color: #333;">
											Phone:</div>
										<div class="layui-input-block" style="float:right;width:80%;height:40px">
											<input type="text" name="phone" placeholder="Enter your phone number"
												autocomplete="off" class="layui-input" />
										</div>
									</div>

									<div class="layui-col-sm4" style="padding: 10px 10px">
										<div style="float:left;width:20%;height: 40px;line-height: 40px;color: #333;">
											File:</div>
										<div class="layui-input-block layui-input"
											style="float:right;width:80%;height:40px;line-height:40px">
											<input type="button" id="miaoshu" value="Select File"
												onclick="javascript:$('input[name=\'fileName\']').click();"
												style="background-color: #FFFFFF;border: 1px solid #ccc;font-weight: normal;color: #858585;border-radius: 5px;cursor: pointer;padding:2px 5px"
												class=" text" />
											<input name="file" placeholder="No file are selected" readonly
												onclick="javascript:$('input[name=\'fileName\']').click();"
												style="width: 60%; border: none;" />
											<input type="file" id="fileName" name="fileName" style="display: none;"
												onchange="javascript:$('input[name=\'file\']').val(value);$('input[name=\'file\']').prop('size',this.value.length+6);" />
										</div>
									</div>
									<div class="layui-col-sm8" style="padding: 10px 10px">
										<div style="float:left;width:10%;height: 40px;line-height: 40px;color: #333;">
											Comments</div>
										<div class="layui-input-block" style="float:right;width:90%;">
											<textarea name="comments" placeholder="How can we help?"
												class="layui-textarea">I want to know {$part_number}</textarea>
										</div>
									</div>
									<div class="layui-col-sm4" style="padding: 10px 10px">
										<div class="layui-input-block" style="float:left;margin-top: 54px">
											<button class="layui-btn btn tijiao" id='send_inquiry'
												onclick="send_inquiry()" type='button' style="color:black">
												Submit</button>
										</div>
									</div>

								</div>
							</div>
			<?php } ?>
            

			
		</div>


	</div>
</div>

{include file="index@public/footer" /}
<script type="text/javascript">
	function tongji2(title,type,search_content){
	  $.post("{:url('index/Es/tongji')}",{title:title,type:type,search_content:search_content},function(res){})
	}
	function send_inquiry() {
		$("#send_inquiry").attr("disabled", "true");
		$("#send_inquiry").addClass("layui-btn-disabled");
		var index = layer.load(1, {
			shade: [0.1, '#fff']
		});
		var name = $.trim($("input[name='name']").val());
		var company = $.trim($("input[name='company']").val());
		var email = $.trim($("input[name='email']").val());
		var phone = $.trim($("input[name='phone']").val());
		var comments = $.trim($("textarea[name='comments']").val());
		var Product_Number = '';
		if (name == '') {
			layer.msg('Please Fill In Your Name', {
				time: 2000,
				icon: 5
			});
			layer.closeAll('loading');
			$("input[name='name']").focus();
			$("input[name='name']").parent().css('border', '1px solid red');
			$("#send_inquiry").removeClass("layui-btn-disabled");
			$("#send_inquiry").removeAttr("disabled");
			return false;
		}
		if (email == '') {
			layer.msg('Please Fill In Your Email', {
				time: 2000,
				icon: 5
			});
			layer.closeAll('loading');
			$("input[name='email']").focus();
			$("input[name='name']").parent().css('border', '');
			$("input[name='email']").parent().css('border', '1px solid red');
			$("#send_inquiry").removeClass("layui-btn-disabled");
			$("#send_inquiry").removeAttr("disabled");
			return false;
		}
		/*判断邮箱规则*/
		var t = /^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
		if (!(t.test(email))) {
			layer.msg('The mailbox format is incorrect', {
				time: 2000,
				icon: 5
			});
			layer.closeAll('loading');
			$("input[name='email']").focus();
			$("input[name='name']").parent().css('border', '');
			$("input[name='email']").parent().css('border', '1px solid red');
			$("#send_inquiry").removeClass("layui-btn-disabled");
			$("#send_inquiry").removeAttr("disabled");
			return false;
		}

		var fileName = document.getElementById('fileName').files[0];

		if (fileName != undefined) {
			if (fileName.size > 2097152) {
				layer.msg('The file size cannot exceed 2 megabytes', {
					time: 2000,
					icon: 5
				});
				layer.closeAll('loading');
				$("#send_inquiry").removeClass("layui-btn-disabled");
				$("#send_inquiry").removeAttr("disabled");
				return false;
			}
			/*获取后缀*/
			var flieArr = fileName.name.split('.');
			suffix = flieArr[flieArr.length - 1];
			if (suffix != "") {
				suffix = suffix.toLocaleLowerCase();
			}
			/*判断是否为允许上传的文件*/
			var allfiletype = new Array("gif", "jpeg", "jpg", "png", "pdf", "mp4", "txt", "doc", "xsl", "mp3");
			var a = allfiletype.indexOf(suffix)
			if (a == -1) {
				layer.msg('Only (gif,jpeg,jpg,png,pdf,mp4,txt,doc,xsl,mp3) files are allowed', {
					time: 2000,
					icon: 5
				});
				layer.closeAll('loading');
				$("#send_inquiry").removeAttr("disabled");
				$("#send_inquiry").removeClass("layui-btn-disabled");
				return false;
			}
		}

		var lasturl = <?php
		if (isset($_SERVER['HTTP_REFERER'])) {
			echo "'".$_SERVER['HTTP_REFERER']."'";
		} else {
			echo "'"."'";
		} ?> /*上一个页面的url 不能在ajax里面书写这样就多了一层页面关系*/
		var nowurl = window.location.href; /*当前页面url*/

		var formData = new FormData();
		if (fileName != undefined) {
			formData.append('file', fileName);
		}
		formData.append('name', name);
		formData.append('company', company);
		formData.append('email', email);
		formData.append('phone', phone);
		formData.append('comments', comments);
		formData.append('lasturl', lasturl);
		formData.append('nowurl', nowurl);
		formData.append('Product_Number', Product_Number);

		$.ajax({
			url: "{:url('index/Index/send_inquiry')}",
			/*传向后台服务器文件*/
			type: 'POST',
			/*传递方法 */
			data: formData,
			/*要带的值，在这里只能带一个formdata ，不可以增加其他*/
			dataType: 'json', //传递数据的格式
			async: true, //这是重要的一步，防止重复提交的
			cache: false, //设置为false，上传文件不需要缓存。
			contentType: false, //设置为false,因为是构造的FormData对象,所以这里设置为false。
			processData: false, //设置为false,因为data值是FormData对象，不需要对数据做处理。

			success: function(res) {
				if (res.status == 1) {

					layer.closeAll('loading');
					$(".layui-form input").each(function() {
						$(this).val('');
					})
					$("#miaoshu").val('Select File');
					$("textarea[name='comments']").val('');
					$("#send_inquiry").removeAttr("disabled");
					$("#send_inquiry").removeClass("layui-btn-disabled");
					layer.msg(res.msg, {
						time: 2000,
						icon: 1
					}, function() {
						location.href = "/thank-you/";
					});
					return false;
				} else {
					layer.msg(res.msg, {
						time: 2000,
						icon: 5
					});
					$("#send_inquiry").removeClass("layui-btn-disabled");
					$("#send_inquiry").removeAttr("disabled");
					layer.closeAll('loading');
					return false;
				}
			}
		});

	}
	function related_click(a){
		//console.log($("#related-search-button-"+a));
		//related-search-button-2
        
		$("#related-search-button-"+a).click();
	}

</script>